<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div1{
      width:400px;
      height:400px;
      background:white;
    }
    body{
      margin:0;
      background: black;
    }
  </style>
</head>
<body>
<div id="div1">
  <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  </svg>
</div>
<script>
  const svgNS = 'http://www.w3.org/2000/svg';
  const oParent = document.getElementById('div1');
  const oSvg = document.getElementById('svg1');

  function createTag(tag, objAttr){
    const oTag = document.createElementNS(svgNS, tag);
    for(let attr in objAttr){
      oTag.setAttribute(attr, objAttr[attr]);
    }
    return oTag;
  }

  const arrNum = [23.61, 17.10, 16.05, 15.40, 11.75, 14.95];
  const angle = 360;
  let sumNum = 0;
  const outerR = 120;
  const innerR = 70;
  const centerX = 200;
  const centerY = 200;
  const outerXY = [
    {x: 320, y: 200}
  ];
  const innerXY = [
    {x:270, y: 200}
  ];
  const arrColor = ['red', 'blue', 'yellow', 'green', 'black', 'gray'];

  for (let i = 0; i < arrNum.length; ++i) {
    sumNum += arrNum[i] / 100 * angle;

    if(i===arrNum.length-1){
      sumNum = 360;
    }

    const outerX = Math.cos(sumNum * Math.PI / 180) * outerR + centerX;
    const outerY = Math.sin(sumNum * Math.PI / 180) * outerR + centerY;
    outerXY.push({x: outerX, y: outerY});

    const innerX = Math.cos(sumNum * Math.PI / 180) * innerR + centerX;
    const innerY = Math.sin(sumNum * Math.PI / 180) * innerR + centerY;
    innerXY.push({x: innerX, y: innerY});
  }

  for (let i = 0; i < outerXY.length; ++i) {
    if (i === outerXY.length - 1) {
      break;
    }
    const oPath = createTag('path', {
      fill: arrColor[i],
      d: `M${outerXY[i].x} ${outerXY[i].y} A ${outerR} ${outerR} 0 0 1 ${outerXY[i + 1].x} ${outerXY[i + 1].y} L ${innerXY[i + 1].x} ${innerXY[i + 1].y} A ${innerR} ${innerR} 0 0 0 ${innerXY[i].x} ${innerXY[i].y}`
    });

    const oAn = createTag('animate', {
      attributeName: 'd',
      dur: '0.5',
      from: `M${outerXY[i].x} ${outerXY[i].y} A ${outerR} ${outerR} 0 0 1 ${outerXY[i].x} ${outerXY[i].y} L ${innerXY[i].x} ${innerXY[i].y} A ${innerR} ${innerR} 0 0 0 ${innerXY[i].x} ${innerXY[i].y}`,
      to: `M${outerXY[i].x} ${outerXY[i].y} A ${outerR} ${outerR} 0 0 1 ${outerXY[i + 1].x} ${outerXY[i + 1].y} L ${innerXY[i + 1].x} ${innerXY[i + 1].y} A ${innerR} ${innerR} 0 0 0 ${innerXY[i].x} ${innerXY[i].y}`
    });

    oPath.appendChild(oAn);
    oSvg.appendChild(oPath);
  }

  oParent.appendChild(oSvg)
</script>
</body>
</html>
